<template>
  <div class="login-box">
    <div class="login-content">
      <div class="mask"></div>
      <div class="content-box">
        <h3 class="ui-text-center login-title">标题名称</h3>
        <el-form ref="form"
                 :model="form"
                 :rules="rules">
          <el-form-item prop="name">
            <el-input v-model="form.name"
                      placeholder="请输入用户名"
                      @keyup.enter.native="submitForm('form')">
              <template slot="prepend"><i class="ui-icon icon-yonghu"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input v-model="form.pwd"
                      show-password
                      placeholder="请输入密码"
                      @keyup.enter.native="submitForm('form')">
              <template slot="prepend"><i class="ui-icon icon-mima"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       class="btn-block"
                       :loading="btnLoad"
                       @click="submitForm('form')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import { Button, Form, FormItem, Input, Image } from 'element-ui';
export default {
  components: {
    [Form.name]: Form,
    [Button.name]: Button,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    [Image.name]: Image,
  },
  data() {
    return {
      imgBack: require("../../assets/img/pub/login.png"),
      btnLoad: false,
      form: {
        name: "",
        pwd: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }
        ],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }
        ],
      }
    };
  },
  mounted() {
    if (process.env.NODE_ENV !== 'production') {
      this.form.name = "15899220300";
      this.form.pwd = "123456";
    }
  },
  methods: {
    submitForm(formName) {
      var that = this;
      that.btnLoad = true;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.$ajax.post("api-auth/oauth/token", {
            data: {
              username: that.form.name,
              password: that.form.pwd,
              grant_type: "password",
              client_id: "smgzh",
              client_secret: "sixmuseums",
            },
            type: "form",
            success: function (res) {
              if (res.resp_code == 400) {
                that.$message.error(res.resp_msg);
                that.btnLoad = false;
              } else {
                that.$setCookie("token", res.access_token, 0.1);
                that.$setCookie("tokenType", res.token_type);
                that.getUser();
              }
            }
          });
        } else {
          that.btnLoad = false;
          console.log("error submit!!");
          return false;
        }
      });
    },
    getUser() {
      var that = this;
      that.$http.get("api-user/users/getuserinfobybackground", {
        success: function (res) {
          if (res.resp_code == 0) {
            that.$setCookie("name", res.datas.nickname);
            // 保存用户信息
            store.commit('SetUserInfo', res.datas)
            // that.$setCookie("img", res.datas.headImgUrl);
            that.$message({
              message: "登录成功！",
              type: "success"
            });
            setTimeout(() => {
              that.btnLoad = false;
              that.$router.push('/');
            }, 2000);
          }
        }
      })
    },
  }
};
</script>

<style scoped>
.login-box {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.login-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: transparent url("../../assets/img/pub/login.png") center center
    no-repeat;
  /* background: linear-gradient(45deg, #66b1ff, #479bf5, #2471c4);
  background: #f3f3f3;
  filter: blur(5px); */
  z-index: -1;
  background-size: cover;
}

.login-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  margin: 0 0 10px;
  border-bottom: 1px solid #f3f3f3;
}

.login-content {
  width: 100%;
  position: relative;
  height: 250px;
  width: 300px;
  border-radius: 5px;
  overflow: hidden;
}

.mask {
  display: block;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  opacity: 0.7;
}
.content-box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 20;
  padding: 0 20px;
}

.btn-block {
  width: 100%;
}

.card-img {
  display: block;
  width: 100%;
  height: 50px;
  /* float: right; */
  /* margin:0 auto; */
}
</style>